<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、通勤时间分布特征</div>
<div id="table4-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
<#--<table  id='table4' style="margin-top:15px;">
    <tr>
        <th>时间</th>
        <th>出行人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表4 通勤出行时间分布</div>-->
<div id="myecharts4" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 通勤出行时间分布</div>

<div id="table5-desc" style="text-indent: 2em;font-size:20px;margin-top: 15px;line-height: 35px;"></div>
<table  id='table5' style="margin-top:15px;">
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表5 海口市通勤时间在不同区域的变化特征</div>
<script>
    var dataTable4 = ${dataTable4}
    $("#table4-desc").text("${dataTable4GrowthDesc}")
    var dataTable5 = ${dataTable5}
    $("#table5-desc").text("由表5通勤时间分布特征可以发现，通勤时间在15min以内的人数${lessThan3kmMax}人数最多，${lessThan3kmMin}人数最少。通勤距离在60min以上的人数${moreThan60KmMax}内人数最多，${moreThan60KmMin}内人数最少")
    /*var result4 = [
        {
            date: "2022-06-07",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 144},
                { time: "10:00", count: 4 },
                { time: "11:00", count: 1444 },
            ],
        },
        {
            date: "2022-06-08",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 45 },
                { time: "10:00", count: 44 },
                { time: "11:00", count: 244 },
            ]
        },
        {
            date: "2022-06-09",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 245 },
                { time: "10:00", count: 44 },
                { time: "11:00", count: 244 },
            ]
        },
        {
            date: "2022-06-10",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 245 },
                { time: "10:00", count: 844 },
                { time: "11:00", count: 244 },
            ]
        },
    ];*/
    var result4 = []
    $.each(dataTable4, (k, v) => {
        console.log(k, v)
        result4.push({
            date: k,
            datas: v
        })
    })
    console.log(result4)
    $(document).ready(function() {
        // $.each(dataTable4, function (index, item) {
        //     var tr = '<td>' + item.time + '</td>' + '<td>' + item.peopleCount + '</td>';
        //     $("#table4").append('<tr>' + tr + '</tr>')
        // });
        var myecharts4 = echarts.init(document.getElementById("myecharts4"));
        // var barLegendData = $.map(result4, function(n, i){ return n.time });
        // var barValues = $.map(result4, function(n, i){ return n.peopleCount });
        // var optionLine = getOptionLine(barLegendData, barValues, '人员出行时间分布特征');
        var series = [], xCategory = [], color = ['#4b91ff', '#f2637b', '#f49b25', '#5ace7d', '#8f53e0', '#f9cd1a']
        $.each(result4,function(index,item) {
            var obj = { name: '', type: 'line', data: [] }
            var count = $.map(item.datas, function(n, i){ return n.count; })
            if(index===0) {
                xCategory = $.map(item.datas, function(n, i){ return n.time; })
            }
            obj.name = item.date;
            obj.data = count;
            series.push(obj);
        });
        var optionLine = getOptionLine(xCategory, series, '人员出行时间分布特征', color)
        myecharts4.setOption(optionLine);

        if (dataTable5) {
            var th = '<th>&nbsp;</th>';
            $.each(dataTable5.head, function (index, item) {
                th += '<th>' + item.name + '</th>';
            });
            $("#table5").append('<tr>' + th + '</tr>');
            $.each(dataTable5.data, function (index, item) {
                var tr = '<td>' + item.peopleCount + '</td>';
                $.each(dataTable5.head, function (index1, item1) {
                    tr += '<td>' + item[item1.field] + '</td>';
                });
                $("#table5").append('<tr>' + tr + '</tr>')
            });
        }
    });
    function getOptionLine(barLegendData, series, title, color) {
        var option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
                formatter: params => {
                    let tooltipStr = ''
                    $.each(params, (idx, it) => {
                        it.data = (it.data/10000).toFixed(2)
                        tooltipStr += '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + it.color + '"></span>'  + it.seriesName + '&emsp;'+  it.data  + '万</p>'
                    })
                    console.log(tooltipStr)
                    console.log(params)
                    return tooltipStr
                }
            },
            color: color? color: ['#4b91ff'],
            legend: false,
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: barLegendData,
            },
            yAxis: {
                name: '单位/万',
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    fontSize: 14,
                    show: true,
                    formatter: function(params) {
                        var result = '';
                        result = params / 10000;
                        if (params > 1000) {
                            return result + '万'
                        } else {
                            return params
                        }
                    },
                },
            },
            series: series
        };
        return option
    }
</script>